<template>
	<div class="newRadio">
		<RadioTitle :titleName="titleName" />
		<ul class="newRadioList">
			<li v-for="item in newRadioList" :key="item.id">
				<img class="newRadioList-img" :src="item.picUrl" />
				<div class="newRadioList-text">
					<h5>{{ item.name }}</h5>
					<p>{{ item.rcmdtext }}</p>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
export default {
	name: "NewRadio",
};
</script>

<script setup>
import RadioTitle from "./RadioTitle.vue";
import { getNewRadioList } from "@/api/AnchorStation";
import { onMounted, ref, defineProps } from "vue";

const props = defineProps({
	radioType: Number,
});

const newRadioList = ref([]);
const titleName = ref("");
const getNewRadioLists = async (value) => {
	const data = await getNewRadioList(value);
	// console.log(data);
	newRadioList.value = data.djRadios.slice(0, 4);
	titleName.value = data.djRadios[0].category;
};
onMounted(() => {
	getNewRadioLists(props.radioType);
});
</script>

<style>
.newRadio {
	width: 1000px;
	margin: 0 auto;
}

.newRadioList {
	margin: 0 20px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

.newRadioList li {
	display: flex;
	width: 448px;
	height: 120px;
	line-height: 120px;
	flex-direction: row;
	padding: 20px 0;
	border-bottom: 1px solid #999;
}

.newRadioList li:nth-child(3),
.newRadioList li:nth-child(4) {
	border: none;
}

.newRadioList-img {
	width: 120px;
	height: 120px;
}

.newRadioList-img:hover {
	cursor: pointer;
}

.newRadioList-text {
	width: 254px;
	height: 120px;
	margin-left: 20px;
}

.newRadioList-text h5 {
	width: 100%;
	font-size: 18px;
	line-height: 24px;
	margin: 16px 0 20px;
}
.newRadioList-text p {
	font-weight: normal;
	width: 270px;
	height: 20px;
	line-height: 20px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.newRadioList-text h5:hover,
.newRadioList-text p:hover {
	text-decoration: underline;
	cursor: pointer;
}

.newRadioList-text h5 {
	color: #333;
}
.newRadioList-text p {
	width: 150px;
	color: #999;
}

.newRadioList li a:hover {
	color: #666;
	border: 1px solid #666;
	cursor: pointer;
}
</style>
